<template>
  <div class="star-content-container">
    <div class="star-content-left">
      <el-input class="tree-input" v-model="filterText" placeholder="请输入过滤条件" :suffix-icon="Search" />
      <el-tree
        ref="treeRef"
        :data="dataTree"
        node-key="value"
        :highlight-current="true"
        :default-expanded-keys="[0]"
        :expand-on-click-node="false"
        @node-click="handleClickNode"
        :filter-node-method="filterNode"
      ></el-tree>
    </div>
    <div class="star-content-right">
      <right-list :id="dataId" :fid="dataFid" :fPath="attrPath" @change-data="loadTree" />
    </div>
  </div>
</template>

<script setup>
import { ElTree } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import rightList from '@/views/system/router/RouterList'
import { loadTreeData } from '@/api/system/router/RouterManager'

import '@/style/layout.less'

const treeRef = ref()
const dataId = ref('')
const dataFid = ref('0')
const dataTree = ref([])
const filterText = ref('')
const attrPath = ref('')

const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}

watch(filterText, (val) => {
  treeRef.value.filter(val)
})

const handleClickNode = (node) => {
  if (node.attr.type === '0') {
    dataId.value = node.value
    return
  }
  dataId.value = ''
  dataFid.value = node.value
  attrPath.value = node.attr.path
}

const loadTree = () => {
  loadTreeData().then(data => {
    dataTree.value = data
  })
}

onMounted(() => {
  loadTree()
})

</script>

<style lang="less" scoped>
@import '../../../style/tree.less';
</style>
